<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>组件化</title>
</head>
<body>

    <div id="app">
        <!-- 通过组件的名称利用标签进行调用 -->
        <add-num-com></add-num-com>
    </div>

    <!-- 定义html模板 -->
    <template id="addNumTen">
        <div>
            <h1>定义组件</h1>
            <h3>数值：{{num}}</h3>
            <button @click="addNum">自增</button>
        </div>
    </template>

    <script src="../js/vue.js"></script>
    <script>
        // 创建一个组件
        Vue.component("addNumCom",{
            // 定义组件内部结构
            data(){
                return{
                    num: 0
                }
            },
            // 定义组件标签体,
            // 方法一: 字符串拼接
            // 方法二: 模板字符串写法,块级作用域
            // 方法三: template
            template: "#addNumTen",
            methods: {
                addNum(){
                    this.num++
                }
            }
        })
        // 定义 Vue 对象
        const app = new Vue({
            el: "#app"
        })


    </script>
</body>
</html>